<template>
    <div>
    <div class="table-search">
        <el-row>
            <el-col>
                <el-button  @click="add">新增栏目</el-button>
            </el-col>
        </el-row>
    </div>
    <div class="table-container">
        <el-table
        ref="columnTable"
        :data="dataColumn"
        row-key="id"
        border
        highlight-current-row
        @row-click="RowClick"
        @selection-change="handleSelectionChange"
        v-bind:class="{'is-edit': isEdit}"
        style="width: 100%">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column align="center" label="序号" width ="100" >
            <template slot-scope="scope">
                <span >{{ scope.$index+1 }}</span>
            </template>
            </el-table-column>
        <el-table-column
        align="center"
        label="分类名称">
        <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入栏目名称，（建议14字以内，不超过30个字）" maxlength="30"></el-input>
            <span>{{ scope.row.name }}</span>
        </template>
        </el-table-column>
        <el-table-column
            align="center"
            label="是否可用"
            width="">
            <template slot-scope="scope">
            <span >{{scope.row.enable?'是':'否'}}</span>
            <el-select  v-model="scope.row.enable">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value">
            </el-option>
            </el-select>
            </template>
        </el-table-column>
        <el-table-column
            align="center"
            width="200px"
            label="操作"
            >
        <template slot-scope="scope">
         <div class="default">
          <el-button type="text"  @click="edit(scope)">编辑</el-button>
          <el-button type="text" @click="remove(scope)">删除</el-button>
       </div>
       <div class="confirm">
         <el-button type="text" @click="submit(scope)">确认</el-button>
          <el-button type="text" @click="cancle(scope)">取消</el-button>
       </div>
        </template>
        </el-table-column>
    </el-table>
    <el-col :span="24" style="margin-top:10px" v-if="dataColumn.length>0">
        <el-button size="small" @click="bathRemove">批量删除</el-button>
    </el-col>
    <el-col :span="24" class="pagination-warp" v-if="dataColumn.length>0">
                <div class="text-center">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="listQuery.currentPage"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="listQuery.size"
                        layout="total, sizes, prev, pager, next ,jumper"
                        :total="total">
                    </el-pagination>
                </div>
    </el-col>
    </div>
</div>
</template>
<script>
import { selectList, insertColumn, updateColumn, deleteColumn, deleteColumns } from '@/api/magazine/magazinecolumn'
export default {
    data() {
        return {
            dataColumn: [],
            options: [
                {id:1,label:"是",value:1},
                {id:2,label:"否",value:0}
            ],
            selections:[],
            tempRow: {},
            total: null,
            adding: false,
            isEdit: false,
            listQuery: {
                currentPage: 1,
                size: 10
            }
        }
    },
    created(){
        this.getList()
    },
    methods: {
        getList() {
            const params = this.listQuery
            selectList(params).then((response) => {
                if (response.code === 0) {
                    this.dataColumn = response.data.records
                    this.total = response.data.total
                    this.isEdit = false
                    this.adding = false
                }
            })
        },
        handleSizeChange(val) {
            this.listQuery.currentPage = 1
            this.listQuery.size = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.listQuery.currentPage = val
            this.getList()
        },
        handleSelectionChange(values){
            this.selections = []
            values.forEach(v => {
                let data = {id:v.id}
                this.selections.push(data)
            })
        },
        RowClick(row, eve ,column) {
            if(row.id === "") return
            if(row.id !== this.tempRow.id) {
                if(this.isEdit){
                    this.getList()
                    this.isEdit = false
                }
                   
            }
            if (this.adding) {
                this.$nextTick(function () {
                    this.dataColumn.splice(0,1)
                })
                this.adding = false
            }
        },
        add() {
            if(this.adding || this.isEdit) return
            const newRow = {id:"", name:"",enable:1}
            this.dataColumn.unshift(newRow)
            this.recoveryHighLight(newRow)
            this.isEdit = true
            this.adding = true
        },
        edit(scope) {
            this.isEdit = true
            this.tempRow = Object.assign({}, this.tempRow, scope.row)
        },
        submit(scope) {
            const row = scope.row
            if (row.id === "") {
                insertColumn(row).then((response) => {
                    if (response.code === 0) {
                        this.isEdit = false
                        this.adding = false
                        this.handleCurrentChange(1)
                        this.$message({
                            type: 'success',
                            message: response.msg
                        })
                    }else{
                         this.$message({
                            type: 'error',
                            message: response.msg
                        })
                    }
                })
            } else {
                updateColumn(row).then((response) => {
                    if (response.code === 0) {
                        this.isEdit = false
                        this.getList()
                        this.$message({
                            type: 'success',
                            message: response.msg
                        })
                    }else{
                         this.$message({
                            type: 'error',
                            message: response.msg
                        })
                    }
                })
            }

        },
        cancle(scope) {
            const row = scope.row
            if (row.id === "") {
                this.getList()
                this.adding = false
            }
            this.isEdit = false
            this.getList()
        },
        remove(scope) {
            const row = scope.row
            row.delFlag = 1
            this.$confirm('确认删除已选中内容?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteColumn(row).then((response) => {
                        if(response.code === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            this.getList()
                        }
                    })
                }).catch(() => {
                  
                })
        },
        bathRemove(){
            if(this.selections.length === 0){
                this.$message({
                    type: 'warning',
                    message: '至少选择一行数据'
                })
                return
            }
            let data = this.selections
            this.$confirm('确认批量删除已选中内容?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteColumns(data).then(response => {
                    if(response.code === 0){
                        this.$message({
                            type: 'success',
                             message: response.msg
                        })
                        this.getList()
                    }
                })
          
            }).catch(() => {
            
            })
        },
        recoveryHighLight(row){
            this.$nextTick(function () {
            this.$refs.columnTable.setCurrentRow(row)
            })
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-container{
    margin: 10px
}
.table-container .el-input,.el-select,.confirm{
    display: none;
}
.is-edit .current-row .default {
    display: none
}
.is-edit .current-row span {
    display: none
}
.is-edit .current-row .confirm{
    display: block;
}
.is-edit .current-row .el-select {
    display: block
}
.is-edit .current-row .el-input {
    display: block
}
.table-search{
  margin: 10px;
  .el-input{
    width: 200px;
    margin-right: 6px;
  }
}
.table-page{
    width: 700px;
    margin: 5px 32%;
}
</style>

